<template>
  <div class="login-container w-full h-full">
    <div class="login w-[90vw] h-[400px] lg:h-[50vh] xl:w-[30vw]">
      <div class="header text-3xl leading-[100px]">登录</div>
      <div class="container">
        <input type="text" placeholder="请输入用户名" v-model="loginForm.user_name" />
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
      <div class="container1">
        <input type="password" placeholder="请输入密码" v-model="loginForm.password" />
        <span class="left"></span>
        <span class="right"></span>
        <span class="top"></span>
        <span class="bottom"></span>
      </div>
      <div class="btn cursor-pointer" @click="login">登录</div>
    </div>
    <MyAlert ref="myAlert"></MyAlert>
  </div>
</template>

<script setup>
import { ref } from "vue";
import MyAlert from "@/components/alert/index.vue"
import {fetchLogin} from "@/assets/api/index.js"
import {useRouter} from "vue-router"

const router = useRouter()
const loginForm = ref({
  user_name: "",
  password: "",
});

const myAlert = ref()
window.localStorage.clear();

const login = async () => {
  if (!loginForm.value.user_name) {
    return myAlert.value.showAlert("用户名未填写");
  }
  if (!loginForm.value.password) {
    return myAlert.value.showAlert("密码未填写");
  }
  let res = await fetchLogin(loginForm.value)
  if (res.code !== 0) {
        myAlert.value.showAlert(res.message)
        return;
    }
  window.localStorage.setItem("token", res.data.token);
  router.push('/patient')
};
</script>

<style scoped>
.login-container{
    background-image: url('/images/login-main.jpg');
    background-size: cover;
}
.login {
  width: 358px;
  height: 460px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #282c34e0;
}
.header {
  font-weight: bold;
  text-align: center;
  color: #61dafb;
}
.container {
  height: 30px;
  width: 250px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

input {
  width: 100%;
  height: 100%;
  position: relative;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 5px;
  background-color: #282c340f;
  color: #61dafb;
  caret-color: #61dafb;
  font-size: 18px;
}
input::placeholder {
  color: #61dafb;
}

span {
  position: absolute;
  content: "";
  display: block;
  background-color: #61dafb;
  transition: transform 0.1s ease-in-out;
}
.top,
.bottom {
  left: 0px;
  right: 0px;
  height: 2px;
}
.left,
.right {
  top: 0px;
  bottom: 0px;
  width: 2px;
  transform: scaleY(0);
}
.top {
  top: 0px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: 0.2s;
}
.left {
  left: 0px;
  transform-origin: bottom center;
  transition-delay: 0.3s;
}
.bottom {
  bottom: 0px;
}
.right {
  right: 0px;
  transform-origin: top center;
  transition-delay: 0.1s;
}
input:focus ~ .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}
input:focus ~ .left {
  transform: scaleY(1);
  transform-origin: top center;
}
input:focus ~ .top {
  transform: scaleY(1);
  transform-origin: right center;
}
.container1 {
  height: 30px;
  width: 250px;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.btn {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 10px 5px;
  width: 52%;
  margin-top: 100px;
  background-color: #61dafb;
  color: #fff;
  font-size: 18px;
}
</style>
